<script setup lang="ts">
import Header from "../components/Header.vue"
import HotSearchCard from "../components/HotSearchCard.vue";
import Say from "../components/Say.vue";
import { getHotType } from "../api/hotSearch";
import { ref } from "vue";

const hotTypes = ref()

getHotType().then((res) => {
    hotTypes.value = res.data.data
})
</script>
<template>
    <el-container>
        <el-header>
            <Header/>
        </el-header>
        <el-container>
            <el-main>
                <el-row>
                    <div class="main">
                        <div class=".cards">
                            <el-row>
                                <el-col v-for="hotType in hotTypes" :xl="4" :md="6" :sm="12" :xs="24">
                                    <HotSearchCard :hotType="hotType"></HotSearchCard>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                    <div class="aside">
                        <Say></Say>
                    </div>
                </el-row>
            </el-main>
            <el-footer>Footer</el-footer>
        </el-container>
    </el-container>
</template>
<style scoped>
.el-container {
  height: 100%;
  width: 100%;
}

.el-header {
    display: flex;
    align-items: center;
    justify-content: center;
}

.el-footer {
    width: 100%;
}

.el-footer,
.el-header {
    background-color: #ffffff;
}

.el-main,
.el-aside{
    background-color: #eceff3;
}

.el-main {
    padding: 10px;
}

.main {
    width: calc(100% - 370px);
}

.aside {
    width: 360px;
    margin-left: 10px;
}

@media (max-width:992px) {
    .main {
        width: 100%;
    }
    .aside {
        display: none;
    }
}
</style>